<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM事件流</title>
    <style>
        .father {
            background-color: palevioletred;
            width: 200px;
            height: 200px;
            position: relative;
        }

        .son {
            width: 80px;
            height: 80px;
            background-color: green;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="father">
            <div class="son" >子盒子</div>
        </div>
       <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
       </ul>
    </div>
</body>
<script>
    /* 
    DOM事件流分3个阶段
        捕获 从外往里
        当前目标
        冒泡 从里往外
        
      // 如果不阻止事件传播 则该元素的所有父元素的相同类型事件都会被触发
        
    注意
        js只能执行捕获或者冒泡其中的一个阶段
        onclick和attachEvent只能得到冒泡阶段
         addEventListener 默认是从里到外(冒泡)
             第三个参数如果是true则在捕获阶段调用
                doucument html body father son
             如果是false或默认表示在冒泡阶段调用
        
        实际上大多使用冒泡阶段
        有些事件是没有冒泡的
            onblur onfocus...
    */
    let son = document.querySelector('.son')
    son.addEventListener('click', function () {
        console.log(this.innerHTML)
    },false)
    document.querySelector('.father').addEventListener('click', function () {
        console.log(this.innerHTML)
    })
    document.querySelector('ul').addEventListener('click',function 
(params) {
        console.log('ul列表')
    })
    document.querySelector('ul').children[0].addEventListener('click',function (params) {
        console.log(this.innerHTML)
    })
</script>

</html>